<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
	    <meta name="format-detection" content="telephone=no, email=no">
	    <meta name="HandheldFriendly" content="true">
		<title>demo</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_808616_7u07jsgklei.css" />
		<link rel="stylesheet" type="text/css" href="css/comment.css"/>
		<style type="text/css">
			body{background: #fff;}
			/*.st-container{padding:0 10px 65px;}*/
			.st-container ul li a{display: flex;justify-content: center;align-items: auto;}
			.st-graphic-box{color: #FE715C;}
			.st-img-vertical span {font-size: 30px;}
		</style>
	</head>  
	<body>
		<div class="st-container">
			<ul class="st-row st-border-tl">
				<li class="st-col st-col-33 st-border-br">
					<a href="html/1px/1px.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-1px"></span>
							</div>
							<div class="st-text">
								<p>1px</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/layout/layout.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-kuailiebiao"></span>
							</div>
							<div class="st-text">
								<p>布局</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/button/button.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-anniu"></span>
							</div>	
							<div class="st-text">
								<p>按钮</p>
							</div>
						</div>
					</a>
				</li>
				
				<li class="st-col st-col-33 st-border-br">
					<a href="html/list/list.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-shuliebiao"></span>
							</div>
							<div class="st-text">
								<p>列表</p>
							</div>
						</div>
					</a>
				</li>
				
				<li class="st-col st-col-33 st-border-br">
					<a href="html/card/card.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-qiapian1"></span>
							</div>
							<div class="st-text">
								<p>卡片</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/bottom-nav/bottom-nav.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-gengduo"></span>
							</div>
							<div class="st-text">
								<p>底部导航</p>
							</div>
						</div>
					</a>
				</li>
				
				<li class="st-col st-col-33 st-border-br">
					<a href="html/form/form.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-bianji"></span>
							</div>
							<div class="st-text">
								<p>表单</p>
							</div>
						</div>
					</a>
				</li>
				
				<li class="st-col st-col-33 st-border-br">
					<a href="html/alert/alert.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-zujian-danchuang"></span>
							</div>
							<div class="st-text">
								<p>弹框</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/refresh-load/load.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-shuaxin"></span>
							</div>
							<div class="st-text">
								<p>加载刷新</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/slideshow/slideshow.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-lunbotu"></span>
							</div>
							<div class="st-text">
								<p>轮播图</p>
							</div>
						</div>
					</a>
				</li>
				
				<li class="st-col st-col-33 st-border-br">
					<a href="html/photoswipe/photo-swipe.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-tupian"></span>
							</div>
							<div class="st-text">
								<p>图片预览</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/ads/ads.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-xinwen"></span>
							</div>
							<div class="st-text">
								<p>广告条滚动</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/select/select.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-xuanze"></span>
							</div>
							<div class="st-text">
								<p>三级联动</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/sort/sort.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-paixu"></span>
							</div>
							<div class="st-text">
								<p>字母排序</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/plan/paln.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-jindutiao"></span>
							</div>
							<div class="st-text">
								<p>进度更新</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/lazy/lazy.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-donghua"></span>
							</div>
							<div class="st-text">
								<p>图片懒加载</p>
							</div>
						</div>
					</a>
				</li>
				<li class="st-col st-col-33 st-border-br">
					<a href="html/scrollbar/scrollbar.html">
						<div class="st-graphic-box">
							<div class="st-img-vertical">
								<span class="iconfont icon-donghua"></span>
							</div>
							<div class="st-text">
								<p>滚动条样式</p>
							</div>
						</div>
					</a>
				</li>
				
			</ul>
			<!--<ul class="st-list st-list-module st-list-skip">
                <li class="st-list-item st-border-b">
                	<a href="html/list/list.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">列表</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/layout/layout.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">布局</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/card/card.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">卡片</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/bottom-nav/bottom-nav.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">底部导航</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/button/button.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">按钮</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/form/form.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">表单</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/alert/alert.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">弹框</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/refresh-load/load.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">加载刷新</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/slideshow/slideshow.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">轮播图</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/1px/1px.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">1px</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/photoswipe/photo-swipe.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">点击图片预览</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/ads/ads.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">广告条滚动</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/select/select.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">三级联动</h4>
						</div>
                    </a>
                </li>
                <li class="st-list-item st-border-b">
                	<a href="html/select/select.html">
                		<div class="st-list-box">
							<h4 class="st-nowarp">物流进度</h4>
						</div>
                    </a>
                </li>
            </ul>
		-->
		</div>
		
		<footer>
			<ul class="st-row-flex st-border-t">
				<li class="st-col st-col-33 active">
					<a href="#">
						<span class="iconfont icon-shouye"></span>
						<p>首页</p>
					</a>
				</li>
				<li class="st-col st-col-33">
					<a href="#">
						<span class="iconfont icon-yingyong"></span>
						<p>商城</p>
					</a>
				</li>
				<li class="st-col st-col-33">
					<a href="html/my.html">
						<span class="iconfont icon-zhanghu"></span>
						<p>我的</p>
					</a>
				</li>
			</ul>
			
		</footer>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var height=$('.st-container ul li a').width();
			$('.st-container ul li a').height(height)
		</script>
	</body>
</html>
  